<template>
<!-- 购物内容 -->
  <div class="shopcart-content">
  <van-swipe-cell v-for="item in list" :key="item.id">
    <div class="card">
      <van-checkbox v-model="item.checked" @click="checkedCell"></van-checkbox>
      <img :src="item.imageHost+item.mainImage" alt="" @click="pushDetail">
      <div class="text">  
        <p @click="pushDetail">{{item.name}}</p>
        <p>{{item.subtitle}}</p>
        <p>
          <span>￥{{item.price}}</span>
          <span><van-stepper @plus="cartAdd(item)" @minus="cartDowm(item)" v-model="item.count"/></span>
        </p>
      </div>
    </div>
    <template #right>
    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)"/>
    </template>
  </van-swipe-cell>
  <van-submit-bar style="margin-bottom: 50px;" :price="$store.getters.getAllPrice*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox :value="allChecked" @click="cancelAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import { SwipeCell,Checkbox,Card,Button,Dialog,Stepper,SubmitBar} from 'vant';
Vue.use(SwipeCell).use(Checkbox).use(Card).use(Button).use(Dialog).use(Stepper).use(SubmitBar)

import {mapState} from 'vuex'
export default {
  data(){
    return {
      // checked:false,
      onSubmit:'',
      // allChecked:''
    }
  },
  props:['list'],
  methods:{
    // 删除商品
    del(item){
      Dialog.confirm({
      title: '确定要删除吗！',
      message: '真的确定吗！',
    }).then(() => {
        this.$emit('cartDel',item)
      })
      .catch(() => {
        console.log('想删我吃屁吧你');
      });
    },
    // 单选商品
    checkedCell(){
      this.$store.dispatch('changeChecked')
    },
    pushDetail(){
      // this.$router.push()
    },
    // 全选商品
    cancelAll(){
      this.$store.dispatch('changeAllChecked')
    },
    // 添加商品
    cartAdd(item){
      this.$emit('cartCount',{productId:item.productId,count:+1})
    },
    // 减少商品
    cartDowm(item){
      this.$emit('cartCount',{productId:item.productId,count:-1})
    }
  },
  computed:{
    ...mapState(['allChecked'])
  }
}
</script>

<style lang="scss" scoped>
  .shopcart-content{
    width: 100%;
  }
  .van-swipe-cell{
    background-color: white;
    margin-bottom: 20px;
  }
  .goods-card {
    margin: 0;
    background-color: white;
  }
  .delete-button {
    height: 100%;
  }
  .shopcart-content{
    margin-top: 88px;
  }
  .card{
    display: flex;
    width: 730px;
    height: 180px;
    padding: 10px;
  }
  .card>.van-checkbox{
    display: flex;
    width: 40px;
    height: 180px;
    padding-right: 15px;
  }
  .card img{
    width: 160px;
    height: 160px;
  }
  .card p:nth-child(1){
    font-size: 26px;
    width: 500px;
    height: 70px;
    overflow: hidden;
  }
  .card p:nth-child(2){
    height: 70px;
    font-size: 24px;
    color: rgb(204, 204, 204);
    width: 500px;
    overflow: hidden;
  }
  .card p:nth-child(3){
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
  }
  .card span:first-child{
    font-size: 30px;
    color: red;
  }
  .card span:last-child{
    font-size: 14px;
  }
  .text{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
</style>